<template>
    <div>
        <div class="music-banner">
            <img width="100%" height="100%" :src="songData.picUrl" alt="">
        </div>  
        <div class="music-title">
            <h4>{{songData.name}}</h4>
        </div>
        <SonMusic @lastMusic="lastMusic" @nextMusic="nextMusic" :songData="songData"></SonMusic>
    </div>
</template>

<script>
import SonMusic from "./sonMusic"
import {geOneSong} from "../api/api"
export default {
    data(){
        return {
            songList:[],
            songData:{

            }
        }
    },
    components:{
        SonMusic
    },
    mounted(){
        this.findNowSong()
    },
    methods:{
        lastMusic(){
            let nowIndex = this.songList.findIndex((item)=>item.id==this.songData.id)
            nowIndex--
            if(nowIndex==-1){
                nowIndex = 9
                this.songData = this.songList[nowIndex]
                
               
            }else{
                this.songData = this.songList[nowIndex]
            }
            this.getMusicId(this.songData.id)
        },
        nextMusic(){
            let nowIndex = this.songList.findIndex((item)=>item.id==this.songData.id)
            nowIndex++
            if(nowIndex==this.songList.length){
                nowIndex = 0
                this.songData = this.songList[nowIndex]
                
            }else{
                
                console.log(nowIndex)
                this.songData = this.songList[nowIndex]
            }
            this.getMusicId(this.songData.id)
        },
        findNowSong(){
            let id = this.$route.params.id;
            this.songList = this.getStorage("localSong")
            let data =  this.songList.find(item=>item.id==id)
            console.log(data)
            this.songData = data
            this.getMusicId(data.id)
        },
        getMusicId(id){
            geOneSong({id}).then(res=>{
                this.songData.url = res.data.data[0].url
            })
        }
    }

}
</script>

<style scoped>
    .music-banner{
        border-radius: 50%;
        width:200px;
        height: 200px;
        margin: 0 auto;
        /* border: 1px solid red; */
        overflow: hidden;
        
    }
</style>